<template>
	<view>
		<myHead title="发布职位"></myHead>
		<view class="contentCla">
			<view class="box1Cla">
				<view class="titleCla">其他信息</view>
				<view class="zhuCla">完善的职位信息更受求职者青睐哟~</view>
				<view class="leixingCla">招聘人数</view>
				<view class="zhiweileibieCla">
					<input class="inputCla" type="number" value="number" v-model="obj.Amount" placeholder="请输入招聘人数"
						maxlength="3" />
				</view>
				<view class="leixingCla">经验要求</view>
				<view class="zhiweileibieCla" @click="dropDown('Experience')">
					<view class="content">
						<span class="span1Cla" v-if="!obj.Experience">请选择经验要求</span>
						<span class="span2Cla" v-else>{{conversion(obj.Experience, $store.state.jingyan)}}</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="leixingCla">最低学历</view>
				<view class="zhiweileibieCla" @click="dropDown('Education')">
					<view class="content">
						<span class="span1Cla" v-if="!obj.Education">请选择最低学历</span>
						<span class="span2Cla" v-else>{{conversion(obj.Education, $store.state.xeuli)}}</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="leixingCla">薪资待遇</view>
				<view class="zhiweileibieCla" @click="dropDown('Wage')">
					<view class="content">
						<span class="span1Cla" v-if="obj.MinWage == 0 && obj.MaxWage == 0">请选择薪资待遇</span>
						<span class="span2Cla" v-else>{{xinziText}}</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="leixingCla">上班时间</view>
				<view class="zhiweileibieCla" @click="dropDown('OfficeHours')">
					<view class="content">
						<span class="span1Cla" v-if="!obj.OfficeHours">请选择上班时间</span>
						<span class="span2Cla" v-else>{{obj.OfficeHours}}</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="leixingCla">工作假期</view>
				<view class="zhiweileibieCla" @click="dropDown('Holiday')">
					<view class="content">
						<span class="span1Cla" v-if="!obj.Holiday">请选择工作假期</span>
						<span class="span2Cla" v-else>{{obj.Holiday}}</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="leixingCla">工作地址</view>
				<view class="zhiweileibieCla" @click="dropDown('address')">
					<view class="content">
						<span class="span1Cla" v-if="!obj.Address">请选择工作地址</span>
						<span class="span2Cla" v-else>{{obj.Address}}</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="btnbox">
			<view class="btn" @click="fabuClick">
				<text class="textCla">{{this.obj.fbtype == 2 ? '修改' : '发布'}}</text>
			</view>
		</view>
		<u-picker :show="showJobState" :value="jobState" :title="pickerTitle" :defaultIndex="defaultIndex"
			closeOnClickOverlay @cancel="showJobState=false" @close="showJobState=false" keyName="FullName"
			:columns="jobStateList" @confirm="jobchange">
		</u-picker>
		<u-picker :show="xinzishow" :columns="items_2" title="选择薪资(单位:千元)" @confirm="xinziconfirm"
			:defaultIndex="xinzidefaultIndex" @cancel="xinzishow=false" @close="xinzishow=false" closeOnClickOverlay
			@change="xinziChangeHandler" ref="uPicker">
		</u-picker>
	</view>
</template>

<script>
	import myHead from "@/pages/component/baseHead.vue";
	export default {
		data() {
			return {
				obj: {
					WorkType: null, //职位性质 0全职 1兼职 2实习
					JobType: null, // 招聘类型 0社招 1校招 2急聘
					JobName: null, //职位名称
					PositionLab: null, //职位类别
					PositionId: null, // 职位ID
					CategoryIds: null, //职位分类分类 多个逗号隔开 备用.
					Tags: [], // 职位关键词
					Content: "", // 职位描述
					ContentVideos: [
						// 职位视频
						{
							ImgPath: "", // 封面地址
							VideoPath: "", // 视频地址
						},
					],
					Id: 0,
					Amount: null, // 招聘人数
					Experience: null, // 工作经验
					Education: null, // 学历要求
					OfficeHours: null, // 上班时间
					Holiday: null, // 工作假期
					Address: '', // 工作地点 详细地址
					ProvinceCode: null, // 省
					CityCode: null, // 市
					AreaCode: null, // 区
					PcaAddress: null, // 省市区
					Longitude: 0, // 工作地点 经度
					Latitude: 0, // 工作地点 纬度
					ShortAddress: null, //简短地址

					CorpId: null, //职位所属企业id
					CorpName: null, // 职位所属企业名称
					Category1: null, // 职位分类1
					Category2: null, // 职位分类2
					Category3: null, // 职位分类3
					CategoryIds: null, //职位分类分类 多个逗号隔开 备用.
					Negotiable: false, // 薪资待遇(可面议)
					// Wage: null, // 薪资待遇 参考字典 如 1-3
					AnualSalary: 0, //年度月薪
					MinWage: 0, // 薪资待遇 最低
					MaxWage: 0, // 薪资待遇 最高
					fbtype: null, //1、发布职位 2、修改职位
				},
				keyNames: null,
				jobStateList: [],
				showJobState: false,
				jobState: "", //求职状态
				pickerTitle: '',
				xinzishow: false,
				xinziText: '',
				items_2: [
					[],
					['——'],
					[],
					['X'],
					[]
				],
				columnDatad: [
					[]
				],
			}
		},
		components: {
			myHead,
		},
		computed: {
			defaultIndex() {},
			xinzidefaultIndex() {}
		},
		created() {
			this.xinziMethods();
			this.getIndustry();
		},
		onLoad(e) {
			this.obj = JSON.parse(e.data)
			console.log(this.obj, '回显数据---------')
			//薪资结构回显
			this.xinziText = (this.obj.MinWage / 1000) + 'K-' + (this.obj.MaxWage / 1000) + 'K' + (this.obj.AnualSalary ? '*' +
				this.obj.AnualSalary + '月' : '')
		},
		methods: {
			tiaozhuan(data) {
				uni.navigateTo({
					url: '/pages/views/packageC/type-recruit/zhiwei/zhiwei-page?data=' + JSON.stringify(data)
				})
			},
			dropDown(val) {
				let data = {};
				this.keyNames = val;
				if (val == "Experience") {
					this.jobStateList = [this.$store.state.jingyan];
					this.showJobState = true;
					this.pickerTitle = '选择经验要求'
				} else if (val == "Education") {
					this.jobStateList = [this.$store.state.xeuli];
					this.showJobState = true;
					this.pickerTitle = '选择最低学历'
				} else if (val == "Wage") {
					this.xinzishow = true;
					this.pickerTitle = '选择薪资待遇'
				} else if (val == "OfficeHours") {
					data.title = val;
					data.titleName = '上班时间';
					data.Content = '您添加的上班时间将为求职者提供参考';
					data.OfficeHours = this.obj.OfficeHours;
					this.tiaozhuan(data)
				} else if (val == "Holiday") {
					data.title = val;
					data.titleName = '工作假期';
					data.Content = '您添加的工作假期将为求职者提供参考';
					data.Holiday = this.obj.Holiday;
					this.tiaozhuan(data)
				} else if (val == "address") {
					data.title = val;
					data.titleName = '工作地址';
					data.Content = '仔细确认位置点，否则会影响求职者导航';
					data.Address = this.obj.Address;
					data.ProvinceCode = this.obj.ProvinceCode;
					data.CityCode = this.obj.CityCode;
					data.AreaCode = this.obj.AreaCode;
					data.Longitude = this.obj.Longitude;
					data.Latitude = this.obj.Latitude;
					this.tiaozhuan(data)
				}
			},

			getIndustry() {
				// 学历要求
				this.$http.dic.DataSelector(385800548573317).then((res) => {
					if (res.Success) {
						this.$store.commit("setXeuli", res.Result);
					}
				});
				// 工作经验
				this.$http.dic.DataSelector(385800643113093).then((res) => {
					if (res.Success) {
						this.$store.commit("setJingyan", res.Result);
					}
				});
			},

			getValue(val) {
				if (this.keyNames == "OfficeHours") {
					this.obj.OfficeHours = val;
				} else if (this.keyNames == "Holiday") {
					this.obj.Holiday = val;
				} else if (this.keyNames = "address") {
					this.obj.Address = val.Address;
					this.obj.ProvinceCode = val.ProvinceCode;
					this.obj.CityCode = val.CityCode;
					this.obj.AreaCode = val.AreaCode;
					this.obj.PcaAddress = val.PcaAddress;
					this.obj.ShortAddress = val.ShortAddress;
					this.obj.Longitude = val.Longitude;
					this.obj.Latitude = val.Latitude;
				}
			},

			jobchange(e) {
				if (this.keyNames == "WorkType") {
					this.obj[this.keyNames] = Number(e.value[0].EnCode);
				} else if (this.keyNames == "Experience") {
					this.obj[this.keyNames] = e.value[0].EnCode;
				} else if (this.keyNames == "Education") {
					this.obj[this.keyNames] = Number(e.value[0].EnCode);
				} else if (this.keyNames == "Wage") {
					this.obj[this.keyNames] = e.value[0].EnCode;
				} else if (this.keyNames == "OfficeHours") {
					this.obj[this.keyNames] = e.value[0].FullName;
				} else if (this.keyNames == "Holiday") {
					this.obj[this.keyNames] = e.value[0].FullName;
				}
				this.showJobState = false;
			},
			// 转换
			conversion(val, sta) {
				let name = null;
				// console.log(val,sta,String(val))
				if (!sta) return;
				sta.forEach((ite) => {
					if (ite.EnCode == String(val)) {
						name = ite.FullName;
					}
				});
				return name ? name : val;
			},
			// 取消薪资选择器
			xinziconfirm(e) {
				this.xinziText = e.value[0] + '-' + e.value[2] + '*' + e.value[4];
				let MinWage = '';
				let MaxWage = '';
				MinWage = e.value[0].replace('K', '000');
				MaxWage = e.value[2].replace('K', '000');
				this.obj.MinWage = Number(MinWage);
				this.obj.MaxWage = Number(MaxWage);
				this.obj.AnualSalary = Number(e.value[4].replace('月', ''));
				this.xinzishow = false;
			},
			// 薪资change事件
			xinziChangeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker,
				} = e;
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.columnDatad[index]);
					// picker.setColumnValues(4, this.columnDatad[index]);
				}
			},
			xinziMethods() {
				for (let j = 1; j <= 250; j++) {
					this.items_2[0].push(j + "K");
					this.items_2[2].push(j + 1 + "K")
				}
				let data = [
					this.items_2[2]
				];
				for (let s = 0; s <= 251; s++) {
					data.push([]);
					for (let i = 1; i < s; i++) {
						data[i].push(s + "K");
					}
				}
				this.columnDatad = data.slice(1);

				console.log("columnDatad", this.columnDatad, data, ' this.items_2', this.items_2);
				for (let i = 12; i <= 24; i++) {
					this.items_2[4].push(i + '月')
				}
			},
			//发布职位
			fabuClick() {
				if (!this.obj.Amount || this.obj.Amount <= 0) {
					this.$util.toast("请输入招聘人数并且招聘的人数必须大于0");
					return;
				}
				if (!this.obj.Experience) {
					this.$util.toast("请选择工作经验");
					return;
				}
				if (!this.obj.Education) {
					this.$util.toast("请选择最低学历");
					return;
				}
				if (this.obj.MinWage == 0) {
					this.$util.toast("请选择薪资待遇");
					return;
				}
				if (!this.obj.OfficeHours) {
					this.$util.toast("请选择上班时间");
					return;
				}
				if (!this.obj.Holiday) {
					this.$util.toast("请选择工作假期");
					return;
				}
				if (!this.obj.Address) {
					this.$util.toast("请选择工作地址");
					return;
				}
				if (this.obj.fbtype == 2) {
					//编辑修改
					console.log(this.obj, '编辑修改---------')
					this.$http.huirc.jobModify(this.obj).then((res) => {
						if (res.Success) {
							this.$util.toast("修改成功");
							this.$store.commit("setUpData", (this.$store.state.upData += 1));
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								});
							}, 1000)
						}
					});
				} else {
					const app = getApp();
					let obj = {
						corpId: app.globalData.userCorpId, //企业ID
						searchType: 1, //状态
					};
					this.$http.plan.checkPlanFeature(obj).then((res) => {
						if (res.Success) {
							if (res.Result.IsEnabled) {
								this.$http.huirc.jobcr(this.obj).then((res) => {
									if (res.Success) {
										this.$util.toast("发布成功");
										this.$store.commit("setUpData", (this.$store.state.upData += 1));
										setTimeout(() => {
											uni.navigateBack({
												delta: 2
											});
										}, 1000)
									}
								});
							} else {
								this.$util.toast("会员权益点数已经消耗完，明天再来吧~~");
							}
						}
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-popup__content {
		border-radius: 20rpx;
	}

	/deep/.u-toolbar__title {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
	}

	/deep/.u-toolbar {
		padding: 28rpx 0;
		border-bottom: 1rpx solid #E7E7E8;
		;
	}

	.contentCla {
		display: flex;
		flex-direction: column;
		align-items: center;

		.box1Cla {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			width: 85%;
			margin: 20rpx 0 220rpx;
			padding: 30rpx 30rpx;

			.titleCla {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
			}

			.zhuCla {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
				margin: 10rpx 0 50rpx;
			}

			.leixingCla {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.zhiweileibieCla {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 12rpx 0;
				border-bottom: 1rpx solid #dadbde;
				margin-bottom: 40rpx;

				.content {
					//超出一行省略号
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.span1Cla {
						font-size: 30rpx;
						font-weight: 400;
						color: #999999;
					}

					.span2Cla {
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
					}
				}

				.inputCla {
					/deep/.uni-input-placeholder {
						font-size: 30rpx;
						font-weight: 400;
						color: #999999;
					}

					/deep/.uni-input-input {
						font-weight: bold;
					}
				}
			}

		}

	}

	.btnbox {
		position: fixed;
		background-color: #fff;
		bottom: 0;
		width: 100%;
		height: 200rpx;
		text-align: center;

		.btn {
			background: #3476FE;
			border-radius: 10rpx;
			opacity: 1;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			margin: 30rpx 30rpx;
			box-sizing: border-box;

			.textCla {
				font-size: 30rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>